<!-- 功能模块 -->
<template>
	<view class="container">
		<view class="content">
			<text class="title">功能模块</text>
			<view class="grid">
				<view class="grid-item btn-transition-scale9" v-for="(item, index) in list" :key="index"
					@click="handleNavTo(item)">
					<image class="icon" :src="item.icon" mode="aspectFit"></image>
					<text class="label">{{item.label}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const list = [{
			label: '发布商品',
			icon: '/static/images/index-business/post-goods.svg',
			url: '/pagesB-goods-manage/add-goods/index'
		},
		{
			label: '商品管理',
			icon: '/static/images/index-business/goods-manage.svg',
			url: '/pagesB-goods-manage/index/index',
			isRelauch: true
		},
		{
			label: '店铺设置',
			icon: '/static/images/index-business/shop-set.svg',
			url: '/pagesB-shop/index/index',
			isRelauch: true
		},
		{
			label: '订单管理',
			icon: '/static/images/index-business/order-manage.svg',
			url: '/pagesB-order/index/index'
		},
		{
			label: '数据统计',
			icon: '/static/images/index-business/statis.svg',
			url: '/pagesB-shop-center/statistics/index'
		},
	]

	const handleNavTo = (item) => {
		if (!item.url) return;

		if (item.isRelauch) {
			uni.reLaunch({
				url: item.url
			})
		} else {
			uni.navigateTo({
				url: item.url
			});
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 28rpx 25rpx 0;
	}

	.content {
		background: #FFFFFF;
		border-radius: 20rpx;
		background-color: white;

		.title {
			display: block;
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
			padding: 24rpx 0 0 30rpx;
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			column-gap: 18rpx;
			row-gap: 40rpx;
			padding: 30rpx 0;

			&-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.icon {
					width: 58rpx;
					height: 58rpx;
				}

				.label {
					font-size: 28rpx;
					color: #222222;
					line-height: 1.5;
					margin-top: 18rpx;
				}
			}
		}
	}
</style>